<template>
    <coreshop-page :isBack="false" bgColor="rgba(0,0,0,0)" :isShowStatusBarHeight="false" showLoginModalDom
        needLoadingPage :loadingPage="loading">
        <view class="layout-classify-page">
            <!-- #ifndef MP-ALIPAY -->
            <uv-navbar bgColor="#EEF3F7" :height="menuButtonHeight+'px'">
                <template #left>
                    <!-- #ifdef MP -->
                    <view class="search-box" style="max-width: 500rpx;">
                    <!-- #endif -->
                        <!-- #ifdef APP -->
                        <view class="search-box" style="width: 700rpx;">
                        <!-- #endif -->
                            <view class="page-name">分类</view>
                            <uv-input v-model="state.keyWord" @confirm="handleSearch" shape="circle"
                                placeholder="请输入关键词" prefixIcon="search"
                                :customStyle="{ 'background-color': '#fff' ,'padding':'3px 9px'}"
                                prefixIconStyle="font-size: 22px;color: #909399">
                                <template #suffix>
                                    <view class="search-tit" @click.stop="handleSearch">搜索</view>
                                </template>
                            </uv-input>
                        </view>
                </template>
            </uv-navbar>
            <!-- #endif -->
            <view class="content-box" :style="{'height': `${state.height}px` }">
                <classifyOne v-if="shopConfigStore.config.cateStyle == GoodsListEnum.one" :data="state.categoriesList">
                </classifyOne>
                <classifyTwo v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.two"
                    :data="state.categoriesList">
                </classifyTwo>
                <classifyThree v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.three"
                    :data="state.categoriesList" :height="state.height"></classifyThree>
                <classifyFour v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.four"
                    :data="state.categoriesList" :cartData="state.cartData" :height="state.height" @getCartNumAndMoney="getCartNumAndMoney">
                </classifyFour>
                <classifyFive v-else-if="shopConfigStore.config.cateStyle == GoodsListEnum.five"
                    :data="state.categoriesList" :cartData="state.cartData" :height="state.height" :statusBarHeight="statusBarHeight"  @getCartNumAndMoney="getCartNumAndMoney">
                </classifyFive>
            </view>
        </view>
    </coreshop-page>
</template>

<script setup lang="ts">
    import { onMounted, reactive, watchEffect, ref } from 'vue';
    import { onHide, onPullDownRefresh, onShow } from '@dcloudio/uni-app';
    import { useShopConfigStore } from '@/core/store';
    import { queryAllCategories, queryCartNumAndMoney } from '@/core/api';
    import { GoodsListEnum } from '@/core/enum';
    import { handleRouteNavigateTo } from '@/core/utils';
    import { onClassifyPageHide, onClassifyPagePullDownRefresh, UserToken } from '@/core/consts';
    import type { Response, ShopConfigStoreType, CategoriesType ,CartMoneyNumType} from '@/core/models';
    import classifyOne from './classify-page/classify-one/classify-one.vue';
    import classifyTwo from './classify-page/classify-two/classify-two.vue';
    import classifyThree from './classify-page/classify-three/classify-three.vue';
    import classifyFour from './classify-page/classify-four/classify-four.vue';
    import classifyFive from './classify-page/classify-five/classify-five.vue';
    import { useLoadingFn, useSystemInfo } from '@/core/hooks';

    // 获取项目配置
    const shopConfigStore : ShopConfigStoreType = useShopConfigStore();

    // 获取自定义导航栏高度
    const { statusBarHeight, systemInfo, menuButtonHeight } = useSystemInfo();
    const loading = ref(true);

    const state = reactive<{
        categoriesList : Array<CategoriesType>,
        height : number,
        keyWord : string;
        cartData : CartMoneyNumType;
    }>({
        categoriesList: [],
        height: 0,
        keyWord: "",
        cartData: {},
    })

    const handleuAllCategories = useLoadingFn(getAllCategories, loading);


    onMounted(async () => {
        handleuAllCategories();
    })

    watchEffect(() => {
        state.height = systemInfo.value.windowHeight - statusBarHeight.value;
    })

    onHide(() => {
        /** 触发自定义onhide事件，让后代组件监听页面是关闭 - 用于关闭sku弹框 */
        uni.$emit(onClassifyPageHide);
    });

    onShow(() => {
        if ((shopConfigStore.config.cateStyle == GoodsListEnum.four || shopConfigStore.config.cateStyle == GoodsListEnum.five) &&
            uni.getStorageSync(UserToken)) {
            getCartNumAndMoney();
        }
    });

    onPullDownRefresh(async () => {
        /** 触发onPullDownRefresh事件，让后代组件监听页面是下拉刷新 */
        uni.$emit(onClassifyPagePullDownRefresh);
        state.categoriesList = [];
        await handleuAllCategories()
        uni.stopPullDownRefresh();
    });


    /** 获取数据分类 */
    async function getAllCategories() {
        const allCategories : Response<Array<CategoriesType>> = await queryAllCategories();
        state.categoriesList = allCategories.data || [];
    }

    /** 获取购物车数量和价格 */
    const getCartNumAndMoney = async () => {
        const cartNumAndMoney : Response<{ count : number, money : number }> = await queryCartNumAndMoney();
        state.cartData = {
            count: cartNumAndMoney?.data?.count || 0,
            money: cartNumAndMoney?.data?.money || 0,
        }
    }

    /** 搜索 */
    const handleSearch = () => {
        handleRouteNavigateTo(`/pages/category/category?key=${state.keyWord}`);
    }
</script>

<style lang="scss" scoped>
    @import './classify.scss';
</style>